<html><head>
<!------ 以下内容不要动 --------------------------------------------------------->
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/ui.js" id="ui_class" ></script>
<!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
<link class="_dcdev_preset_" type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.8/assets/css/dcdevui.css">
<style>
  .component_type_list2_container{
    flex-direction: row;
    display: flex;
    width: 100vw;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
  }
  #_dc_component_type_list_ul_{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
  }
  #_dc_component_type_list_search_panel_{
    margin-left: 10px;
  }
</style>
<div   id="select_component_popup">
    <div class="layui-tab layui-tab-card" lay-filter="component_list">
        <ul class="layui-tab-title">
        <li class="layui-this">分类组件</li>
          <li >全部组件</li>
        </ul>
        <div class="layui-tab-content" >
         <!-- 组件分类 -->
          <div class="layui-tab-item layui-show">
            <div style="margin-left:10px;display: flex;flex-direction: column;padding-right: 10px;align-items: center;justify-content: center;">
                <div id="component_list" ></div>
                <hr>
                <div  id="component_list_2" ></div>
                
            </div>
            <div id="component_type_list2"  style="margin-bottom:10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"></div>
          </div>
            <!-- 全部组件 -->
          <div class="layui-tab-item ">
            <div >
                
                <div id="component_type_list"  ></div>
            </div>
          </div>
        </div>
      </div>
      <div id="component_container" ></div>
</div>

<script>
    $('#component_container').load("select_component.html");
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      var element = layui.element;
        //监听Tab切换，以改变地址hash值
        element.on('tab(component_list)', function(res){
            console.log(res);
            switch (res.index) {
                case 0:
                    break;
                case 1:
                    //加载全部组件
                    component_list_all();
                    break;
                default:
                    break;
            }
        });
      //…
    });
    

    </script>